import { useEffect, useState } from "react";

import { Modal, Segmented } from "antd";
import { GoToLink, type GoToLinkConfig } from "./actions/GoToLink";
import { ShowMessage, type ShowMessageConfig } from "./actions/ShowMessage";
import { CustomJs, type CustomJsConfig } from "./actions/CustomJs";
import { ComponentMethod, ComponentMethodConfig } from "./actions/ComponentMethod";

import { type ComponentEvent } from "../../stores/component-config";
import { config } from "process";

interface ActionModalProps {
    visible: boolean
    action?: GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig
    eventConfig: ComponentEvent
    handleOk: (config?: GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig) => void
    handleCancel: () => void
}
const map = {
    goToLink: "访问链接",
    showMessage: "消息提示",
    customJS: "自定义JS",
    componentMethod: "组件方法"
}

export const ActionModal = (props: ActionModalProps) => {
    const { visible, eventConfig, handleOk, handleCancel, action } = props;

    const [key, setKey] = useState<string>('访问链接');
    const [curConfig, setCurConfig] = useState<GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig>();

    useEffect(() => {
        if (action?.type) {
            setKey(map[action.type]);
        }
    }, [action])

    return (
        <Modal title="事件动作配置"
            width={800}
            open={visible}
            okText='添加'
            cancelText='取消'
            onOk={() => { handleOk(curConfig) }}
            onCancel={handleCancel}>
            <div className="h-[500px]">
                <Segmented value={key} onChange={setKey} block options={['访问链接', '消息提示', '自定义JS', '组件方法']}>
                </Segmented>
                {
                    key === '访问链接' && <GoToLink value={action?.type === 'goToLink' ? action.url : ''} onChange={(config) => {
                        setCurConfig(config)
                    }} />
                }
                {
                    key === '消息提示' && <ShowMessage value={action?.type === 'showMessage' ? action.config : undefined} onChange={(config) => {
                        setCurConfig(config)
                    }} />
                }
                {
                    key === '自定义JS' && <CustomJs value={action?.type === 'customJS' ? action.code : ''} onChange={(config) => {
                        setCurConfig(config)
                    }} />
                }
                {
                    key === '组件方法' && <ComponentMethod value={action?.type === 'componentMethod' ? action.config : undefined} onChange={(config) => {
                        setCurConfig(config)
                    }}></ComponentMethod>
                }
            </div>
        </Modal>
    )
}